<template>
  <!-- <div class="video-input"> -->
    <!-- <div style='display: flex'>
      <div style="width: 70%">
        <Input v-model:value="videoSrc" placeholder="请输入视频地址，e.g. https://xxx.mp4"></Input>
      </div>
      <div style="width: 30%">
        <Button style="margin-left: 10px" type="default" @click="selectVideo()">选择视频文件</Button>
        <input value="" ref="videoFile" type="file" accept="video/*" id="videoFile" style='display: none'
               @change="insertVideoElement">
      </div>
    </div>

    <div class="btns">
      <Button @click="close()" style="margin-right: 10px">取消</Button>
      <Button type="primary" @click="intsertVideo()">确认</Button>
    </div> -->

     <Modal style="top: 20px" :closable="false" width="60%" :footer="null" v-model:visible="show" title="视频文件">
       <div style='display: flex'>
      <div style="width: 70%">
        <Input v-model:value="videoSrc" placeholder="请输入视频地址，e.g. https://xxx.mp4"></Input>
      </div>
      <div style="width: 30%">
        <Button style="margin-left: 10px" type="default" @click="intsertVideo()">插入视频</Button>
        <input value="" ref="videoFile" type="file" accept="video/*" id="videoFile" style='display: none'
               @change="insertVideoElement">
      <Button @click="close()" style="margin-right: 10px">取消</Button>
      </div>
    </div>
      <Spin :spinning='spinning'>
        <Row class="list-box" v-if="!spinning && dataList && dataList.rows">
          <Col style="padding: 10px" :span="6" v-for="(item,index) in dataList.rows" :key="index">
          <Card hoverable style="width: 100%">
        <template #cover>
          <div class="item-box">
          <video  :src="item.fileUrl.split('1/profile').join('2')" controls="controls">
            您的浏览器不支持 video 标签。
          </video>
          </div>
        </template>
        <CardMeta :title="item.fileName">
          <template #description>
            <!-- <Button size="small" style="margin-right: 10px">查看</Button> -->
            <Button size="small" type="primary" @click="selectVideoPath(item.fileUrl)">选择</Button>
          </template>
        </CardMeta>
      </Card>
          </Col>
        </Row>
        <!-- <Card hoverable style="width: 60px">
        <template #cover>
          <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
        </template>
        <CardMeta title="Europe Street beat">
          <template #description>www.instagram.com</template>
        </CardMeta>
      </Card> -->
      </Spin>
       <!-- <div class="btns">
      <Button @click="close()" style="margin-right: 10px">取消</Button>
      <Button type="primary" @click="intsertVideo()">确认</Button>
    </div> -->
    </Modal>
  <!-- </div> -->
</template>

<script lang="ts">
import {defineComponent, ref, onMounted} from 'vue'
import {message} from 'ant-design-vue'
import request from '@/utils/request'
import { state } from '@/store/state'

export default defineComponent({
  name: 'video-input',
  emits: ['insert', 'close'],
  props:["show"],
  data(){
    return{
      allList:[]
    }
  },
  setup(props, {emit}) {

    const videoSrc = ref('https://www.w3school.com.cn/i/movie.ogg')
    let dataList = ref()
    const visible = ref(false)
    const spinning = ref(false)

    const intsertVideo = () => {
      if (!videoSrc.value) return message.error('请先输入正确的视频地址')
      emit('insert', videoSrc.value)
    }

    const audioFile = ref()

    const insertVideoElement = () => {
      videoSrc.value = audioFile.value
    }

    const getFileList = () => {
       if(!state.token){
        message.warning("请登录后查看！")
        return;
      }
      const query = {
        fileType: 'video'
      }
      request({
        url: '/systems/file/list',
        method: 'get',
        params: query
      }).then(res => {
        dataList.value = res
        spinning.value = false 
      }).catch(err => {
        message.error("数据加载失败")
        spinning.value = false
      })
    }

    const selectVideo = () => {
      visible.value = true
      spinning.value = true 
      getFileList()
    }
    const selectVideoPath = (val: string) =>{
      const path = val.split('1/profile').join('2');
      emit('insert', path)
    }
    const close = () => emit('close')
    onMounted(() => {
      getFileList()
    })
    return {
      videoSrc,
      intsertVideo,
      selectVideo,
      selectVideoPath,
      audioFile,
      dataList,
      visible,
      spinning,
      getFileList,
      insertVideoElement,
      close
    }
  },
})
</script>

<style lang="scss">

.list-box {
  height: 500px;
  overflow: auto;
}

.item-box {
  video,
  img {
    width: 100%;
    // height: 100%;
  }
}

.video-input {
  width: 480px;
}

.btns {
  margin-top: 10px;
  text-align: right;
}
</style>
